<template>
  <div>
    <div class="conMsg">
      <div class="conMsg">
        <div class="top">
          <div class="title">
            <i class="el-icon-collection-tag" />手机号变更记录
          </div>
        </div>
        <div class="table">
          <!--列表-->
          <el-table
            :data="phoneList"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
            :default-sort = "{prop: 'create_time', order: 'descending'}"

          >
            <el-table-column label="客户名称" prop="customer_name" /> 
            <el-table-column label="现手机号" prop="telephone" />
            <el-table-column label="原手机号" prop="last_customer_phone" />
            <el-table-column label="变更日期" prop="create_time" />
            <el-table-column label="操作员名称" prop="realname" />
          </el-table>
      </div>
      </div>
      <div class="conMsg">
        <div class="top">
          <div class="title">
            <i class="el-icon-collection-tag" />护士变更记录
          </div>
        </div>
        <div class="table">
          <el-table
            :data="nurseList"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
            :default-sort = "{prop: 'create_time', order: 'descending'}"

          >
            <el-table-column label="客户名称" prop="customer_name" /> 
            <el-table-column label="现责任护士" prop="now_name" />
            <el-table-column label="原责任护士" prop="last_name" />
            <el-table-column label="变更日期" prop="create_time" />
            <el-table-column label="操作员名称" prop="realname" />

          </el-table>
        </div>
      </div>
      <div class="conMsg">
        <div class="top">
          <div class="title">
            <i class="el-icon-collection-tag" />医生变更记录
          </div>
        </div>
        <div class="table">
          <el-table
            :data="doctorList"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
            :default-sort = "{prop: 'create_time', order: 'descending'}"

          >
            <el-table-column label="客户名称" prop="customer_name" /> 
            <el-table-column label="现所属医生" prop="now_name" />
            <el-table-column label="原所属医生" prop="last_name" />
            <el-table-column label="变更日期" prop="create_time" />
            <el-table-column label="操作员名称" prop="realname" />
          </el-table>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import {
  phoneLogList,
  changeLogList
} from "@/api/client";
  class Page {
    total = 0;
    page = 1;
    pagesize = 100;
  }

export default {
  props: {
    clienId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: new Page(),
      phoneList:[],
      doctorList:[],
      nurseList:[]
    };
  },
  mounted() {
    this.getList();
  },
  created() {},
  methods: {
    // 获取详情
    getList() {
      phoneLogList({  ...this.page,customer_id: this.clienId }).then(res => {
        this.phoneList = res.data.data;
        this.page.total = res.data.total;
      });
      changeLogList({  ...this.page,customer_id: this.clienId }).then(res => {
        this.doctorList = res.data.data.filter(item => item.type == 1);
        this.nurseList = res.data.data.filter(item => item.type == 2);
        this.page.total = res.data.total;
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.conMsg {
  margin-bottom: 30px;
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: bold;
      font-size: 14px;
      line-height: 34px;
      color: #666;
    }
  }
  .table {
    border-top: 1px solid #eee;
    .rowTel {
      border: 1px solid #eee;
      border-right: 0;
      border-top: 0;
      text-align: right;
      padding-right: 30px;
      height: 50px;
      line-height: 50px;
      background: #f9fafc;
      color: #878683;
      font-size: 14px;
    }
    .rowTel2 {
      border-left: 0;
    }
    .rowCon {
      border: 1px solid #eee;
      border-top: 0;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 30px;
      background: #fff;
      color: #878683;
      font-size: 14px;
    }
  }
}
</style>
